<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${ad == null ?'发布':'编辑'}广告</title>
    <%@include file="../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/ad/publish_form.css">
</head><body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
            <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/ad/save.do">
                <input type="hidden" name="id" value="${ad.id}"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题<span class="f-verify-red"></span></label>
                    <div class="layui-input-block">
                        <input type="text" name="title" autocomplete="off" placeholder="请输入标题"
                               class="layui-input" value="${ad.title}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">封面图<span class="f-verify-red">*</span></label>
                    <div class="cover-content">
                        <input type="hidden" name="pic" id="pic" lay-verify="pic" value="${ad.pic}"/>
                        <c:if test="${ad == null || empty ad.pic}">
                            <span id="cover-img" class="cover-img" style="background-image:url(${ctx}/image/posterImg.png)"></span>
                        </c:if>
                        <c:if test="${ad != null && not empty ad.pic}">
                            <span id="cover-img" class="cover-img" style="background-image:url('${ad.pic}')"></span>
                        </c:if>
                        <%--<div class="u-single-upload">--%>
                            <%--<input type="file" id="upload_single_img" class="u-single-file" accept="image/gif,image/png,image/jpg,image/jpeg"> <span class="u-single-upload-icon">+添加广告图片</span>--%>
                        <%--</div>--%>
                        <a class="layui-btn layui-btn-danger" id="sel_pic_img">+添加广告图片</a>
                        <%--<div class="form-word-aux">建议尺寸：800x450</div>--%>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">广告来源<span class="f-verify-red">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="origin" value="0" lay-filter="origin" title="外部广告"
                        ${ad == null ||ad.origin == null || ad.origin == 0 ? 'checked="checked"' : ''}
                        >
                        <input type="radio" name="origin" value="1" lay-filter="origin" title="内部广告" ${ad.adPos == 7 ? 'disabled':''}
                        ${ad != null && ad.origin == 1 ? 'checked="checked"' : ''}
                        >
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">广告位置<span class="f-verify-red">*</span></label>
                        <div class="layui-input-inline">
                            <select name="adPos" lay-filter="adPos"  lay-verify="adPos">
                                <option value="">请选择</option>
                                <c:forEach var="type" items="${adTypes}">
                                    <option value="${type.value}" ${ad.adPos == type.value ? 'selected="selected"' : ""}>${type.label}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" adPos="5" <c:if test="${ad.adPos != 5 || ad.adPos !=7}">style="display: none;"</c:if>>
                    <div class="layui-inline">
                        <label class="layui-form-label">播放秒数<span class="f-verify-red">*</span></label>
                        <div class="layui-input-inline">
                            <input type="number" name="playSecond" lay-verify="playSecond" autocomplete="off" class="layui-input" value="${ad != null && ad.playSecond != null ? ad.playSecond : 3}">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">排序号</label>
                        <div class="layui-input-inline">
                            <input type="number" name="sort" lay-verify="sort" autocomplete="off" class="layui-input" value="${ad.sort}">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" adOrigin="1" <c:if test="${ad == null || ad.origin != 1}">style="display: none;"</c:if>>
                    <div class="layui-inline">
                        <label class="layui-form-label">内部广告类型<span class="f-verify-red">*</span></label>
                        <div class="layui-input-inline">
                            <select name="tag"  lay-filter="tag">
                                <option value="">请选择</option>
                                <c:forEach var="type" items="${adTags}">
                                    <option value="${type.value}" ${ad.tag == type.value ? 'selected="selected"' : ""}>${type.label}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" adOrigin="1" <c:if test="${ad == null || ad.origin != 1}">style="display: none;"</c:if>>
                    <label class="layui-form-label">
                        广告类型ID
                        <span class="f-verify-red">*</span>
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="refId"  lay-verify="refId" autocomplete="off" class="layui-input" value="${ad.refId}">
                    </div>
                </div>
                <div class="layui-form-item" adOrigin="0" <c:if test="${ad.origin != null && ad.origin != '0'}">style="display: none;"</c:if>>
                    <label class="layui-form-label">
                        广告链接地址<span class="f-verify-red">*</span>
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="link" lay-verify="link"  autocomplete="off" class="layui-input" value="${ad.link}" placeholder="以http://开头">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
						<a href="${ctx}/ad/list.do" class="layui-btn layui-btn-primary">取消</a>
                    </div>
                </div>
            </form>
            </div>
        </div><!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>

<script>

    $(function () {
        layui.use(['form'], function () {
            var form = layui.form, laydate = layui.laydate;

            form.on('radio(origin)', function (data) {
                var origin = data.value;
                var disOrigin = origin == 0 ? 1 : 0;
                $('[adOrigin=' + origin + ']').show();
                $('[adOrigin=' + disOrigin + ']').hide();
            });
            form.on('select(adPos)', function (data) {
                var pos = data.value;
                if (pos == 5 || pos == 7) {
                    $('[adPos=' + 5 + ']').show();
                } else {
                    $('[adPos=' + 5 + ']').hide();
                }
                if (pos == 7) {
                    $('input[name=origin][value=1]').attr('disabled', 'disabled');
                    form.render('radio');
                } else {
                    $('input[name=origin][value=1]').removeAttr('disabled');
                    form.render('radio');
                }
            });

            //自定义验证规则
            form.verify({
                pic: function (value) {
                    if (value == "") {
                        return "请上传文章封面图";
                    }
                },
                adPos: function (value) {
                    if (value == "") {
                        return "请选择广告位置";
                    }
                },
                playSecond: function (value) {
                    if (value == "" && $('[name=adPos]').val() == 5) {
                        return "请输入播放秒数";
                    }
                },
                tag: function (value) {
                    if (value == "" && $('[name=origin]:checked').val() == 1) {
                        return "请选择内部广告类型";
                    }
                },
                refId: function (value) {
                    if (value == "" && $('[name=origin]:checked').val() == 1) {
                        return "请填写ID";
                    }
                },
                link: function (value) {
                    if (value == "" && $('[name=origin]:checked').val() == 0) {
                        return "请填写外部广告链接地址";
                    }
                }
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var action = $("#myForm").attr("action");
                    $.post(action, $('#myForm').serialize(), function (res) {
                        typeof callBack === 'function' && callBack();
                        if (res.success) {
                            util.layerMsgSuccess("提交成功", function () {
                                location.href = "${ctx}/ad/list.do";
                            })
                        } else {
                            util.layerMsgError("提交失败")
                        }
                    });
                });
                return false;
            });
        });
        $('#sel_pic_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                compress: 0,
                type: '<%=TargetType.AD.getCode()%>',
                cb: function (imgs) {
                    $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#pic').val(imgs[0].path);

                }
            })
        })
    })
</script>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '广告管理',
            href:'${ctx}/ad/list.do'
        },{
            name: '${ad == null ? '发布' : '编辑'}广告',
            curr: true
        }],
        btns:[{
            type:'back'
        }]
    });
</script>
</body>
</html>